<template>

    <div>

        <div class="chain-link-bar-wrapper">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>商铺管理</el-breadcrumb-item>
                <el-breadcrumb-item to="/product">退款订单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>退款订单</span>

            </div>

            <div class="app-diliver-10"></div>

            <div class="clearfix app-tabs-wrapper color-black-third">
        <span
                :class="{'color-theme': page.status == -1}"
                class="app-tab app-margin-r-40"
                @click="selectTabStatus(-1)"
        >全部</span>
                <span
                        :class="{'color-theme': page.status == 0}"
                        class="app-tab app-margin-r-40"
                        @click="selectTabStatus(0)"
                >待商家处理</span>
                <span
                        :class="{'color-theme': page.status == 1}"
                        class="app-tab app-margin-r-40"
                        @click="selectTabStatus(1)"
                >商家同意</span>
                <span
                        :class="{'color-theme': page.status == 2}"
                        class="app-tab app-margin-r-40"
                        @click="selectTabStatus(2)"
                >商家拒绝</span>
                <span
                        :class="{'color-theme': page.status == 3}"
                        class="app-tab app-margin-r-40"
                        @click="selectTabStatus(3)"
                >待打款</span>
                <span
                        :class="{'color-theme': page.status == 4}"
                        class="app-tab app-margin-r-40"
                        @click="selectTabStatus(4)"
                >已打款</span>
            </div>

            <div class="app-diliver-15"></div>
            <div class="app-diliver-15"></div>

            <div>
                <div class="app-display-inline app-margin-h-20">
                    <el-input
                            clearable
                            placeholder="手机号"
                            v-model="page.phone"
                            style="width: 200px;"
                    ></el-input>
                </div>

                <div class="app-display-inline app-margin-h-20">
                    <SubmitButton
                            type="primary"
                            plain
                            icon="el-icon-search"
                            :post-option="{
              url: searchUrl,
              data: page,
              callback: searchCB
            }"
                    >搜索
                    </SubmitButton>
                </div>
            </div>

            <div class="app-diliver-15"></div>
            <div class="app-diliver-15"></div>

            <el-table :data="productList" stripe border @sort-change="sortMethod" style="width: 100%"
                      class="nc-table-btn-ctrl">
                <el-table-column type="index" :index="indexMethod"/>
                <el-table-column label="用户名" width="100" prop="username"/>
                <el-table-column label="手机号" width="120" prop="phone"/>
                <el-table-column label="银行" prop="bank"/>
                <el-table-column label="开户人" prop="account_name"/>
                <el-table-column label="卡号" prop="account_no"/>
                <el-table-column label="店铺名称" prop="name"/>
                <el-table-column label="店铺客服" prop="service_phone"/>
                <el-table-column label="退款说明" prop="refund_explain"/>
                <el-table-column label="退款原因" prop="refund_cause"/>
                <el-table-column label="商家备注" prop="remark"/>
                <el-table-column label="退款金额" width="100">
                    <template slot-scope="scope">
                        {{scope.row.refund_money / 100}}
                    </template>
                </el-table-column>
                <el-table-column label="商家同意时间" prop="consent_refund_time"/>
                <el-table-column label="打款状态">
                    <template slot-scope="scope">
                        <span class="text-bold color-warning" v-if="scope.row.status != 1">待商家处理</span>
                        <span class="text-bold color-danger"
                              v-if="scope.row.status == 1 && scope.row.transfer_status == 0">未打款</span>
                        <span class="text-bold color-success"
                              v-if="scope.row.status == 1 && scope.row.transfer_status == 1">已打款</span>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态">
                    <template slot-scope="scope">
                        <span class="text-bold color-warning" v-if="scope.row.status == 0">待商家处理</span>
                        <span class="text-bold color-success" v-if="scope.row.status == 1">商家同意</span>
                        <span class="text-bold color-danger" v-if="scope.row.status == 2">商家拒绝</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                v-if="scope.row.status == 1 && scope.row.transfer_status == 0 && scope.row.is_expire == 1"
                                type="warning"
                                plain
                                size="mini"
                                @click="checkStatusHandle(scope.row.id, 1)">确认打款
                        </el-button>

                        <!--<NcButton
                          v-if="role > 1"
                          size="mini"
                          type="danger"
                          :post-option="{url: deleteUrl, callback: getPage, confirm: '确定要删除活动信息【'+ scope.row.product_name +'】吗？', data: {id: scope.row.product_id} }"
                          class="app-margin-l-10 app-margin-v-5"
                          >删除</NcButton>-->

                        <!--<a class="" :href="'#/order/refundOrderDetail/' + scope.row.id" target="_blank">
                            <el-button plain size="mini">详情</el-button>
                        </a>-->
                    </template>
                </el-table-column>
            </el-table>


            <div class="pager-bar-wrapper">
                <el-pagination
                        background
                        layout="prev, pager, next, total"
                        :total="page.totalRow"
                        :page-size="page.pageSize"
                        :current-page="page.pageNum"
                        @current-change="pageNumChange"
                        @prev-click="pageNumChange"
                        @next-click="pageNumChange"
                        @size-change="pageSizeChange"
                >
                </el-pagination>
            </div>

        </el-card>

        <RefundOrderEditDialog :is-show="checkStatusEditVisible" :memberObj="editProduct" :check-yes="checkYes"/>

    </div>

</template>

<script>
    import NcButton from '../common/NcButton';
    import SubmitButton from '../common/SubmitButton';
    import RefundOrderEditDialog from './RefundOrderEditDialog';

    import Api from '../../api/Api';
    import OrderApi from '../../api/OrderApi';

    import JsonKit from '../../kit/JsonKit';

    import {mapGetters} from 'vuex';
    //需要导入vuex的数据管理
    import Store from '../../store/index.js'

    export default {
        components: {
            NcButton,
            SubmitButton,
            RefundOrderEditDialog
        },
        data() {
            return {
                productList: [],

                page: {
                    status: -1,
                    keyWord: '',
                    pageNum: 1,
                    pageSize: 10
                },

                checkStatusEditVisible: false,
                checkYes: 1,
                editProduct: {},

                searchUrl: OrderApi.URL_REFUND_ORDER_LIST,

                role: 0
            };
        },
        computed: {
            ...mapGetters(['hasPerm'])
        },
        created() {
            this.getPage();
            this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
            this.role = Store.state.user.role;
        },
        beforeDestroy: function () {
            this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
        },
        methods: {
            sortMethod(column) {
                this.page.columnProp = column.prop;
                this.page.columnOrder = column.order;
                this.getPage();
            },
            searchCB(json) {
                this.productList = json.list;
                this.setPage(json);
            },
            getPage() {
                OrderApi.refundOrderList(this.page, json => {
                    this.productList = json.list;
                    this.setPage(json);
                });
            },
            pageNumChange(pageNum) {
                this.page.pageNum = pageNum;
                this.getPage();
            },
            pageSizeChange(pageSize) {
                this.page.pageSize = pageSize;
                this.getPage();
            },
            setPage(json) {
                this.page.pageNum = json.pageNum;
                this.page.pageSize = json.pageSize;
                this.page.totalRow = json.totalRow;
            },
            indexMethod(index) {
                return index + 1 + (this.page.pageNum - 1) * this.page.pageSize;
            },
            selectTabStatus(status) {
                this.page.status = status;
                this.page.pageNum = 1;
                this.getPage();
            },
            checkStatusHandle(id, checkYes) {
                this.editProduct = JsonKit.getOf(this.productList, 'id', id, null);
                this.checkYes = checkYes;
                this.checkStatusEditVisible = true;
            },
            hideEditDialog(isSuccess) {
                this.checkStatusEditVisible = false;
                this.editProduct = {};

                if (isSuccess) {
                    this.getPage();
                }
            }
        }
    };
</script>
